<template>
  <div>
    <div class="outmain ba_f">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>用户详情</span>
        </div>
      </div>
      <div class="nameinfo fon_12 bor_rad4 flex">
        <div class="flex-y-top flex-g-0">
          <img class="namelogo" :src="form.portrait"/>
          <span class="mar_l15 mar_t10">{{ form.userName }}</span>
          <span class="mar_l15 mar_t10">userId：{{ form.id }}</span>
        </div>
        <div class="mar_l140 flex-g-1">
          <ul class="flex">
            <li class="bdt flex-col mar_l140">
              <p>余额</p>
              <p class="mar_t3">
                <span class="fon_22 mar_r8 color_3 font_w700 subjectcolor2">{{ form.balance || 0 }}</span>
                <!--  <span class="curs font_w700 alinkcolor">充值</span> -->
              </p>
            </li>
            <li class="bdt flex-col mar_l140">
              <p>积分</p>
              <p class="mar_t3">
                <span class="fon_22 mar_r8 color_3 font_w700 subjectcolor2">{{ form.integral || 0 }}</span>
                <!--  <span class="curs font_w700 alinkcolor">充值</span> -->
              </p>
            </li>
            <li class="bdt flex-col mar_l140">
              <p>成长值</p>
              <p class="mar_t3">
                <span class="fon_22 mar_r8 color_3 font_w700 subjectcolor2">{{ form.growth || 0 }}</span>
                <!--  <span class="curs font_w700 alinkcolor">充值</span> -->
              </p>
            </li>
            <li class="bdt flex-col mar_l140">
              <p>优惠券</p>
              <p class="mar_t3">
                <span class="fon_22 mar_r8 color_3 curs font_w700 subjectcolor2" @click="couponList">{{form.cardNum }}</span>
                <span class="curs font_w700 alinkcolor mar_l10" @click="handleEdit">添加</span>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <el-form ref="form" :model="form" label-width="180px" class="mar_t20">
        <el-form-item label="真实姓名">
          <el-input v-model="form.realName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.userTel"></el-input>
        </el-form-item>
        <el-form-item label="渠道来源">
          <div>小程序</div>
        </el-form-item>
        <el-form-item label="注册时间">
          <div>{{ form.createdAt }}</div>
        </el-form-item>
        <el-form-item label="小程序OPENID">{{ form.openId }}</el-form-item>
        <el-form-item label="会员等级">
<!--          {{ form.level ? form.level : '&#45;&#45;' }}-->
          <el-select v-model="form.level" placeholder="会员等级">
            <el-option v-for="item in leveList" :key="item.level" :label="item.name" :value="item.level"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户标签">
          <el-select v-model="form.vipLabel" placeholder="用户标签">
            <el-option v-for="item in labelData" :key="item.id" :label="item.labelName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>交易统计</span>
        </div>
      </div>
      <div class="flex-g-1">
        <ul class="flex-bet pad_lr_30">
          <li class="flex-col">
            <p class="color_9 fon_12">累计消费金额</p>
            <p class="mar_t3">
              <span class="fon_22 color_3 font_w700">
                <a href="#">{{ form.money || 0 }}</a>
              </span>
            </p>
          </li>
          <li class="flex-col">
            <p class="color_9 fon_12">累计订单数</p>
            <p class="mar_t3">
              <span class="fon_22 color_3 font_w700">
                <a href="#">{{ form.count || 0 }}</a>
              </span>
            </p>
          </li>
          <li class="flex-col">
            <p class="color_9 fon_12">累计维权订单数</p>
            <p class="mar_t3">
              <span class="fon_22 color_3 font_w700">
                <a href="#">{{ form.weicount || 0 }}</a>
              </span>
            </p>
          </li>
          <li class="flex-col">
            <p class="color_9 fon_12">累计退款金额</p>
            <p class="mar_t3">
              <span class="fon_22 color_3 font_w700">
                <a href="#">{{ form.reundcount || 0 }}</a>
              </span>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
    <edit ref="edit" @fetchData="edit"></edit>
    <edit2 ref="edit2" @fetchData="edit"></edit2>
  </div>
</template>
<script>
import {changeDate} from '@/utils/index';
import Edit from "./components/addcoupon";
import Edit2 from "./components/couponlist";
import {getMemberLabel, getMemberInfo, memberInfoSave, levelList} from '@/api/user';

export default {
  components: {Edit, Edit2},
  created() {
    this.init();
    this.leveListMt();
    // console.log('this.$route.params.id;',this.$route.query.id)
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.edit();
    }
  },
  name: 'userquery',
  data() {
    return {
      form: {
        realName: '',
        portrait: '',
        userName: '',
        vipLabel: '',
        userTel: '',
        openId: '',
        balance: '',
        integral: '',
        createdAt: '',
        birthday: '',
        id: '',
        weicount: '',
        reundcount: '',
        cardNum: '',
        level: '',
      },
      form2: {},
      labelData: [],
      leveList:[],
    };
  },
  methods: {
    async edit() {
      const {data} = await getMemberInfo({id: this.id});
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
    },
    async init() {
      const {data} = await getMemberLabel();
      this.labelData = data;
    },
    async leveListMt() {
      const {data} = await levelList();
      this.leveList = data?data:[]
    },
    async onSubmit() {
      this.form.birthday = changeDate(this.form.birthday);
      const {msg} = await memberInfoSave(this.form);
      this.$baseMessage(msg, 'success');
      this.edit();
      this.$router.go(-1);
    },
    handleEdit() {
      this.$refs["edit"].showEdit(this.form);
    },
    couponList() {
      this.$refs["edit2"].showEdit(this.form);
    },
  }
};
</script>
<style>
.searchform .el-form-item {
  margin-bottom: 0;
}

.nameinfo {
  background-color: #f0faff;
  margin: 20px 30px 10px 30px;
  padding: 20px 30px;
}

.namelogo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.mar_l140 {
  margin-left: 100px;
}
</style>
